{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>股票信息平台</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="{% static 'vendors/mdi/css/materialdesignicons.min.css' %}">
    <link rel="stylesheet" href="{% static 'vendors/base/vendor.bundle.base.css' %}">
    <!-- endinject -->
    <!-- plugin css for this page -->
    <link rel="stylesheet" href="{% static 'vendors/datatables.net-bs4/dataTables.bootstrap4.css' %}">
    <!-- End plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <!-- endinject -->
    <script type="text/javascript" src="{% static 'js/echarts.min.js' %}"></script>
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <style>

        #messages {
            height: 550px;
            {#border: 1px solid #ccc;#}
            {#padding: 10px;#}
            {#margin-bottom: 10px;#}
            overflow-y: scroll;
        }

        .bot-message {
            display: block;
            margin-bottom: 10px;
            min-height: 35px;
            text-align: left;
            font-size: 15px;
            line-height: 1.5;
            padding-left: 40px;
            padding-right: 10px;
            background-image: url({% static 'images/机器人.svg' %});
            background-size: 30px 30px;
            background-repeat: no-repeat;
            background-position: left;
        }

        .user-message {
            display: block;
            margin-bottom: 10px;
            padding-right: 40px;
            text-align: right;
            height: 35px;
            font-size: 15px;
            line-height: 1.5;
            padding-left: 10px;
            background-image: url({% static 'images/人.svg' %});
            background-size: 30px 30px;
            background-repeat: no-repeat;
            background-position: right;
        }

    </style>
</head>
<body>
<div class="container-scroller">
    <!-- partial:partials/_navbar.html -->
    <nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row mr-1">
        <div class="navbar-brand-wrapper d-flex justify-content-center">
            <div class="navbar-brand-inner-wrapper d-flex justify-content-between align-items-center w-100">
                <a class="navbar-brand brand-logo" href="{% url 'index' %}"><img src="{% static 'images/logo.svg' %}"
                                                                                 alt="logo"/></a>
                <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
                    <span class="mdi mdi-sort-variant"></span>
                </button>
            </div>

        </div>
        <div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">


            <ul class="navbar-nav navbar-nav-right">
                {% if request.user_obj %}
                    <ul class="nav-item nav-profile dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" id="profileDropdown">
                            {#                        <img src="{% static 'images/faces/face5.jpg' %}" alt="profile"/>#}
                            <i class="mdi mdi-account menu-icon"></i>
                            <span class="nav-profile-name">{{ request.user_obj.username }}</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right navbar-dropdown"
                             aria-labelledby="profileDropdown">
                            <li class="dropdown-item">
                                <i class="mdi mdi-settings text-primary"></i>
                                <a href="#">管理中心</a>
                            </li>
                            <li class="dropdown-item">
                                <i class="mdi mdi-logout text-primary"></i>
                                <a href="{% url 'logout' %}">退 出</a>
                            </li>
                        </div>
                    </ul>
                {% else %}
                    <li class="nav-item dropdown mr-4">
                        <a class="nav-link count-indicator dropdown-toggle d-flex justify-content-center align-items-center"
                           href="{% url 'login' %}">
                            <span>登录</span>
                        </a>
                    </li>
                    <li class="nav-item dropdown mr-4">
                        <a class="nav-link count-indicator dropdown-toggle d-flex justify-content-center align-items-center"
                           href="{% url 'register' %}">
                            <span>注册</span>
                        </a>
                    </li>
                {% endif %}

            </ul>
            <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button"
                    data-toggle="offcanvas">
                <span class="mdi mdi-menu"></span>
            </button>
        </div>
    </nav>
    <!-- partial -->
    <div class="container-fluid page-body-wrapper">

        <nav class="sidebar sidebar-offcanvas" id="sidebar">
            <ul class="nav">
                <li id="home" class="nav-item">
                    <a class="nav-link" href={% url 'index' %}>
                        <i class="mdi mdi-home menu-icon"></i>
                        <span class="menu-title">首页</span>
                    </a>
                </li>
                <li id="stock" class="nav-item">
                    <a class="nav-link" href={% url 'stock' %}>
                        <i class="mdi mdi-circle-outline menu-icon"></i>
                        <span class="menu-title">个股</span>
                    </a>
                </li>
                <li id="industry" class="nav-item">
                    <a class="nav-link" href={% url 'industry' %}>
                        <i class="mdi mdi-view-headline menu-icon"></i>
                        <span class="menu-title">行业</span>
                    </a>
                </li>
                <li id="stock_index" class="nav-item">
                    <a class="nav-link" href={% url 'stock_index' %}>
                        <i class="mdi mdi-chart-pie menu-icon"></i>
                        <span class="menu-title">指数</span>
                    </a>
                </li>
                <li id="company" class="nav-item">
                    <a class="nav-link" href={% url 'company' %}>
                        <i class="mdi mdi-grid-large menu-icon"></i>
                        <span class="menu-title">公司</span>
                    </a>
                </li>
                <li id="concept" class="nav-item">
                    <a class="nav-link" href={% url 'concept' %}>
                        <i class="mdi mdi-emoticon menu-icon"></i>
                        <span class="menu-title">概念</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
                        <i class="mdi mdi-account menu-icon"></i>
                        <span class="menu-title">用户中心</span>
                        <i class="menu-arrow"></i>
                    </a>
                    <div class="collapse" id="auth">
                        <ul class="nav flex-column sub-menu">
                            <li class="nav-item"><a class="nav-link" href="{% url 'register' %}"> 注册 </a></li>
                            <li class="nav-item"><a class="nav-link" href="{% url 'login' %}"> 登录 </a>
                            </li>
                            <li class="nav-item"><a class="nav-link" href="{% url 'logout' %}"> 退出 </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li id="qa_chat" class="nav-item">
                    <a class="nav-link" href={% url 'qa_chat' %}>
                        <i class="mdi mdi-android-debug-bridge menu-icon"></i>
                        <span class="menu-title">智能问答</span>
                    </a>
                </li>
            </ul>
        </nav>

        <div class="main-panel">
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-md-12 grid-margin">
                        <div class="d-flex justify-content-between flex-wrap">
                            <div class="d-flex align-items-end flex-wrap">
                                <div class="d-flex">
                                    <i class="mdi mdi-android-debug-bridge text-muted hover-cursor"></i>
                                    <p class="text-muted mb-0 hover-cursor">&nbsp;/&nbsp;智能问答&nbsp;/&nbsp;</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <div id="chat-container">
                                    <div id="messages">
                                        <div class="bot-message">
                                            我是你的金融小助手，快来向我提问吧~
                                        </div>
                                    </div>
                                    <div class="input-group col-xs-12">
                        <input type="text" class="form-control file-upload-info" id="question-input" placeholder="请输入您的问题">
                        <span class="input-group-append">
                          <button class="file-upload-browse btn btn-primary" id="submit-btn" type="button">提交</button>
                        </span>
                      </div>
{#                                    <input type="text" id="question-input" placeholder="请输入您的问题">#}
{#                                    <button id="submit-btn">提交</button>#}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- content-wrapper ends -->
            <!-- partial:../../partials/_footer.html -->


            <footer class="footer">
                <div class="d-sm-flex justify-content-center justify-content-sm-between">
                    <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">06 组 赵文琳 叶晓萱 秦红 饶书琪 </span>
                    <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"></span>
                </div>
            </footer>


            <!-- partial -->
        </div>
        <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->

<!-- plugins:js -->
<script src="{% static 'vendors/base/vendor.bundle.base.js' %}"></script>
<!-- endinject -->
<!-- Plugin js for this page-->
<script src="{% static 'vendors/chart.js/Chart.min.js' %}"></script>
<script src="{% static 'vendors/datatables.net/jquery.dataTables.js' %}"></script>
<script src="{% static 'vendors/datatables.net-bs4/dataTables.bootstrap4.js' %}"></script>
<!-- End plugin js for this page-->
<!-- inject:js -->
<script src="{% static 'js/off-canvas.js' %}"></script>
<script src="{% static 'js/hoverable-collapse.js' %}"></script>
<script src="{% static 'js/template.js' %}"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="{% static 'js/data-table.js' %}"></script>
<script src="{% static 'js/jquery.dataTables.js' %}"></script>
<script src="{% static 'js/dataTables.bootstrap4.js' %}"></script>
<script>
    // 获取导航菜单的DOM元素
    var homeNav = document.getElementById('home');
    var individualNav = document.getElementById('qa_chat');

    // 移除已选中状态的样式类
    homeNav.classList.remove('active');

    // 添加选中状态的样式类
    individualNav.classList.add('active');

    const messagesContainer = document.getElementById('messages');
    const questionInput = document.getElementById('question-input');
    const submitButton = document.getElementById('submit-btn');

    submitButton.addEventListener('click', () => {
        const question = questionInput.value;
        if (question.trim() === '') {
            return;
        }

        // 发送问题到后端进行处理
        // 这里使用了fetch API来发送POST请求，你可以根据你的后端配置进行调整
        fetch('/app01/get_response/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({question})
        })
            .then(response => response.json())
            .then(data => {
                console.log(data)
                // 显示答案
                const answer = data.response;
                addMessage(question, true);
                addMessage(answer, false);

                // 清空输入框
                questionInput.value = '';
            })
            .catch(error => {
                console.error('发生错误:', error);
            });
    });

    function addMessage(message, isUser) {
        const messageElement = document.createElement('div');
        messageElement.classList.add(isUser ? 'user-message' : 'bot-message');
        messageElement.textContent = message;
        messagesContainer.appendChild(messageElement);
    }

</script>


<!-- End custom js for this page-->
</body>

</html>


